import React from 'react';
import { Row, Col, Form, Icon, Select } from 'antd';
import Button from '../ButtonPc';
import styles from '../index.less';

const { Option } = Select;

const LanguageSkillItem = ({ form, index, i, dictObj, dictObjLoading, remove, ...rest }) => {
    const { getFieldDecorator } = form;

    return (
        <div className={styles.formWrapNew}>
            <div className={styles.itemHead}>
                <div>语言能力{i + 1}</div>
                <Icon
                    type="close-circle"
                    theme="filled"
                    style={{ fontSize: 16, color: '#49536C' }}
                    onClick={() => remove(index)}
                />
            </div>
            <Row gutter={120} {...rest}>
                <Col lg={12} md={24}>
                    <Form.Item label="语种">
                        {getFieldDecorator(`languageSkillLangType[${index}]`, {
                            rules: [
                                {
                                    required: true,
                                    message: '请选择语种'
                                }
                            ]
                        })(
                            <Select
                                placeholder="请选择语种"
                                allowClear
                                getPopupContainer={triggerNode => triggerNode.parentElement}
                                style={{ width: '100%' }}
                            >
                                {dictObj?.recruitTalentLangType?.map(item => (
                                    <Option value={item.dictValue} key={item.dictValue}>
                                        {item.dictName}
                                    </Option>
                                ))}
                            </Select>
                        )}
                    </Form.Item>
                </Col>
                <Col lg={12} md={24}>
                    <Form.Item label="听说能力">
                        {getFieldDecorator(`languageSkillListenSpeakAbility[${index}]`, {
                            rules: [
                                {
                                    required: true,
                                    message: '请选择听说能力'
                                }
                            ]
                        })(
                            <Select
                                placeholder="请选择听说能力"
                                allowClear
                                getPopupContainer={triggerNode => triggerNode.parentElement}
                                style={{ width: '100%' }}
                            >
                                <Option value={1}>一般</Option>
                                <Option value={2}>良好</Option>
                                <Option value={3}>熟练</Option>
                                <Option value={4}>精通</Option>
                            </Select>
                        )}
                    </Form.Item>
                </Col>
                <Col lg={12} md={24}>
                    <Form.Item label="读写能力">
                        {getFieldDecorator(`languageSkillReadWriteAbility[${index}]`, {
                            rules: [
                                {
                                    required: true,
                                    message: '请选择读写能力'
                                }
                            ]
                        })(
                            <Select
                                placeholder="请选择读写能力"
                                allowClear
                                getPopupContainer={triggerNode => triggerNode.parentElement}
                                style={{ width: '100%' }}
                            >
                                <Option value={1}>一般</Option>
                                <Option value={2}>良好</Option>
                                <Option value={3}>熟练</Option>
                                <Option value={4}>精通</Option>
                            </Select>
                        )}
                    </Form.Item>
                </Col>
            </Row>
        </div>
    );
};

const LanguageSkill = ({ form, dictObj, dictObjLoading }) => {
    const { getFieldDecorator } = form;

    const add = () => {
        const languageSkillKeys = form.getFieldValue('languageSkillKeys');
        const nowId = languageSkillKeys[languageSkillKeys.length - 1] + 1 || 0;
        const nextKeys = languageSkillKeys.concat(nowId);
        form.setFieldsValue({
            languageSkillKeys: nextKeys
        });
    };

    const remove = React.useCallback(k => {
        const languageSkillKeys = form.getFieldValue('languageSkillKeys');
        form.setFieldsValue({
            languageSkillKeys: languageSkillKeys.filter(key => key !== k)
        });
    }, []);

    getFieldDecorator('languageSkillKeys', { initialValue: [] });
    const languageSkillKeys = form.getFieldValue('languageSkillKeys');

    return (
        <>
            {languageSkillKeys.map((key, i) => (
                <LanguageSkillItem
                    form={form}
                    key={key}
                    index={key}
                    i={i}
                    dictObj={dictObj}
                    dictObjLoading={dictObjLoading}
                    remove={remove}
                />
            ))}
            <div style={{ margin: '0 0 24px 0' }}>
                <Button block className={styles.addBtn} onClick={add} disabled={languageSkillKeys.length >= 10}>
                    <Icon type="plus" /> 添加语言能力
                </Button>
            </div>
        </>
    );
};

export default LanguageSkill;
